<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row style="padding: 40px 0px;margin: 0px 0px;">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12">

          <el-form ref="updateForm" :model="updateForm" label-width="80px" :rules="rules">

            <el-form-item label="用户编号" prop="id">
              <el-input size="small" v-model="updateForm.id" auto-complete="off" placeholder="请输入接单名称" disabled></el-input>
            </el-form-item>

            <el-form-item label="用户名称" prop="loginname">
              <el-input size="small" v-model="updateForm.loginname" auto-complete="off" placeholder="请输入用户名称"></el-input>
            </el-form-item>

            <el-form-item label="用户密码" prop="password">
              <el-input size="small" v-model="updateForm.password" auto-complete="off" placeholder="请输入用户密码"></el-input>
            </el-form-item>

            <el-form-item label="真实姓名" prop="realname">
              <el-input size="small" v-model="updateForm.realname" auto-complete="off" placeholder="请输入真实姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-select v-model="updateForm.gender" placeholder="请选择">
                  <el-option key="男" value="男" ></el-option>
                  <el-option key="女" value="女" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电子邮箱" prop="email">
              <el-input size="small" v-model="updateForm.email" auto-complete="off" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>

            <el-form-item label="联系方式" prop="mobile">
              <el-input size="small" v-model="updateForm.mobile" auto-complete="off" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="联系地址" prop="mobile">
              <el-input size="small" v-model="updateForm.address" auto-complete="off" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="权限状态" prop="role">
              <el-input size="small" v-model="updateForm.role" auto-complete="off" placeholder="请输入权限状态" value="sss" disabled>ss</el-input>
            </el-form-item>

            <el-form-item label="权限状态" prop="sczt" v-show="false">
              <el-input size="small" v-model="updateForm.sczt" auto-complete="off" placeholder="请输入接单名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即修改</el-button>
              <el-button>取消</el-button>
            </el-form-item>

          </el-form>

        </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>



    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                loginUser:[],

                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },

                updateTitle: '修改',
                updateForm: {
                    id: '',
                    loginname: 'sss',
                    password: '',
                    realname: '',
                    gender: '女',
                    email: '',
                    mobile: '',
                    address: '',
                    role: '',
                    sczt: 0,
                },

                rules: {
                    id: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
                    loginname: [{required: true, message: '请输入登录名称', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
                    realname: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    mobile: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
                    role: [{required: true, message: '请输入权限', trigger: 'blur'}],
                    sczt: [{required: true, message: '请输入审核状态', trigger: 'blur'}]
                },

            }
        },
        /**
         * 创建完毕
         */
        created() {

            this.loginUser = JSON.parse(localStorage.getItem('loginUser'));

            const _this = this;

            axios.post(localStorage.getItem("globalUrl") + "login/findById",this.loginUser).then(function(resp){

                _this.updateForm = resp.data.data[0];

            });

        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            onSubmit() {
                const _this = this;

                axios.put(localStorage.getItem("globalUrl") + "login/update",this.updateForm).then(function(){
                    _this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });

                    axios.post(localStorage.getItem("globalUrl") + "login/findById",_this.loginUser).then(function(resp){

                        _this.updateForm = resp.data.data[0];

                    });

                });


            },


        }
    }
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: white;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>